<template>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="新增推广计划"
      :ghost="false"
      @back="() => $router.go(-1)"
    ></a-page-header>

    <page-header-wrapper>
      <a-card :bordered="false">
        <a-form-model
          ref="alipayForm"
          :model="alipayForm"
          :rules="alipayRules"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 11 }"
        >
          <a-form-model-item label="小程序" prop="id">
            <a-select placeholder="请选择小程序" v-model="alipayForm.id">
              <a-select-option :value="item.id" v-for="item of idList" :key="item.id">
                {{ item.app_name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <template v-if="alipayForm.id">
            <a-form-model-item label="推广名称" prop="delivery_name">
              <a-input v-model="alipayForm.delivery_name" placeholder="请填写推广名称" allowClear />
            </a-form-model-item>

            <a-form-model-item label="推广时间" prop="delivery_begin_time">
              <a-range-picker
                allowClear
                format="YYYY-MM-DD HH:mm"
                valueFormat="YYYY-MM-DD HH:mm"
                :placeholder="['开始时间', '结束时间']"
                v-model="queryTime"
                @change="changeTime"
              />
            </a-form-model-item>

            <a-form-model-item label="素材列表" prop="material_id_list">
              <div class="flexBox">
                <a-input class="inp" :value="getVal('material_id_list')" disabled placeholder="请选择" />
                <a-button type="primary" @click="$refs.popMaterialList.visible = true">
                  选择
                </a-button>
              </div>
              <!-- <a-select mode="multiple" placeholder="请选择素材列表" v-model="alipayForm.material_id_list">
                <a-select-option :value="item.material_id" v-for="item of materialList" :key="item.id">
                  {{ item.material_name }}
                </a-select-option>
              </a-select> -->
            </a-form-model-item>

            <a-form-model-item label="服务提报" prop="service_code_list">
              <div class="flexBox">
                <a-input class="inp" :value="getVal('service_code_list')" disabled placeholder="请选择" />
                <a-button type="primary" @click="$refs.popServiceList.visible = true">
                  选择
                </a-button>
              </div>
              <!-- <a-select mode="multiple" placeholder="请选择服务提报" v-model="alipayForm.service_code_list">
                <a-select-option
                  :value="item.service_code"
                  v-for="item of serviceList"
                  :key="item.id"
                  @change="getSelect"
                >
                  {{ item.service_name }}
                </a-select-option>
              </a-select> -->
            </a-form-model-item>
          </template>

          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button v-loading="btnLoading" type="primary" @click="onSubmit"> 提交 </a-button>
            <a-button style="margin-left: 10px" @click="$router.go(-1)"> 取消 </a-button>
          </a-form-model-item>
        </a-form-model>
      </a-card>
    </page-header-wrapper>

    <popMaterialList
      :id="alipayForm.id"
      ref="popMaterialList"
      @select="e => select('material_id_list', e)"
    ></popMaterialList>

    <popServiceList
      :id="alipayForm.id"
      ref="popServiceList"
      @select="e => select('service_code_list', e)"
    ></popServiceList>
  </div>
</template>

<script>
import { createMarketingDelivery } from '@/api/marketing/alipayPromotion'
import { alipayList } from '@/api/setting/applet'

export default {
  components: {
    popMaterialList: () => import('./components/popMaterialList.vue'),
    popServiceList: () => import('./components/popServiceList.vue')
  },

  data() {
    return {
      serviceList: [],
      btnLoading: false,
      idList: [],
      materialList: [],
      queryTime: [],

      alipayForm: {
        id: '',
        delivery_name: '',
        delivery_booth_code: 1,
        delivery_single_send_config: 1,
        material_id_list: [], // 素材列表
        service_code_list: [], // 服务列表
        delivery_begin_time: '',
        delivery_end_time: ''
      },

      alipayRules: {
        id: [{ required: true, message: '请选择小程序', trigger: 'change' }],
        delivery_name: [{ required: true, message: '请填写推广名称', trigger: 'blur' }],
        // delivery_begin_time: [{ required: true, message: '选择推广时间', trigger: 'blur' }],
        material_id_list: [
          {
            required: true,
            message: '请选择素材',
            trigger: 'change'
          }
        ],
        service_code_list: [
          {
            required: true,
            message: '请选择服务',
            trigger: 'change'
          }
        ]
      }
    }
  },

  computed: {
    getVal() {
      return name => {
        let list = this.alipayForm[name]

        if (!list.length) {
          return ''
        }

        if (name === 'service_code_list') {
          return list.map(el => el.service_name).join(',')
        } else {
          return list.map(el => el.material_name).join(',')
        }
      }
    }
  },

  methods: {
    select(el, e) {
      this.alipayForm[el] = e
    },

    // 切换筛选时间
    changeTime(e) {
      if (e.length) {
        this.alipayForm.delivery_begin_time = e[0]
        this.alipayForm.delivery_end_time = e[1]
      } else {
        this.alipayForm.delivery_begin_time = ''
        this.alipayForm.delivery_end_time = ''
      }
    },

    // 点击提交
    onSubmit() {
      this.$refs.alipayForm.validate(async valid => {
        if (valid) {
          let alipayForm = JSON.parse(JSON.stringify(this.alipayForm))

          alipayForm.service_code_list = alipayForm.service_code_list.map(el => el.service_code)
          alipayForm.material_id_list = alipayForm.material_id_list.map(el => el.material_id)

          let data = {
            mini_id: alipayForm.id,
            params_data: {
              ...alipayForm
            }
          }

          delete data.params_data.id

          this.btnLoading = true
          const res = await createMarketingDelivery(data)
          this.btnLoading = false

          if (!res.code) {
            this.$message.success(res.msg)
            this.$router.back()
            return
          }

          this.$message.error(res.msg)
        } else {
          return false
        }
      })
    }
  },

  async mounted() {
    const hide = this.$message.loading('请稍等', 0)
    let res = await alipayList()
    if (!res.code && res.data.length) {
      this.idList = res.data
    }

    hide()
  }
}
</script>

<style lang="less" scoped>
.flexBox {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  &:last-of-type {
    margin-bottom: 0;
  }

  .inp {
    flex: 1;
  }

  .btn {
    margin-left: 10px;
  }
}
</style>
